<template>
  <div class="app-container">
    <!-- <div class="u-f u-f-ac">
      <b class="lable font14 text_black text_right">{{$t('短信接口设置')}}</b>
      <span class="lable font14 text_black">{{$t('不知道怎么申请短信接口')}},{{$t('可以点击这')}}</span>
      <el-link
        href="http://cdbht.szmcjf.com/help/sms/qcloud"
        class="text_blue"
        target="_blank"
      >{{$t('查看文档详细信息')}}</el-link>
    </div> -->

    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('短信提供商')}}：</span>
      <b class="lable font14 text_black">{{$t('腾讯云')}}</b>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('验证码有效分钟')}}：</span>
      <el-input v-model="minute" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">appid：</span>
      <el-input v-model="appid" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">appkey：</span>
      <el-input v-model="appkey" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('短信模版')}}：</span>
      <el-input v-model="templates" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('短信签名')}}：</span>
      <el-input v-model="signature" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('模版内容')}}：</span>
      <el-input type="textarea" autosize v-model="textarea" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('短信变量名')}}：</span>
      <el-input v-model="SMS_variable" :placeholder="$t('请输入')"></el-input>
    </div>
    <div class="end_order ipt_list u-f u-f-ac">
      <span class="lable font14 text_black">{{$t('有效时间变量名')}}：</span>
      <el-input v-model="variable_time" :placeholder="$t('请输入')"></el-input>
    </div>
    <el-button
      class="note_btn"
      type="primary"
      @click="submits"
      v-if="permissions.indexOf('/set/sms') != -1"
    >{{$t('提交')}}</el-button>
    
    <refresh @click="getData"></refresh>
  </div>
</template>
<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "set-sms",
  data() {
    return {
      textarea: "",
      minute: "",
      appid: "",
      appkey: "",
      templates: "",
      signature: "",
      SMS_variable: "1",
      variable_time: "2"
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      util
        .$http("/set/info", {
          type: "sms_template"
        })
        .then(res => {
          if (res.code == 1) {
            this.minute = res.data.time;
            this.appid = res.data.appid;
            this.appkey = res.data.appkey;
            this.templates = res.data.template_id;
            this.signature = res.data.sign_name;
            this.SMS_variable = res.data.code_name;
            this.variable_time = res.data.time_name;
            this.textarea = res.data.param;
          }
        });
    },
    submits() {
      util
        .$http("/set/sms", {
          time: this.minute,
          appid: this.appid,
          appkey: this.appkey,
          template_id: this.templates,
          sign_name: this.signature,
          code_name: this.SMS_variable,
          time_name: this.variable_time,
          param: this.textarea
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.getData();
          }
        });
    }
  }
};
</script>
<style scoped>
.app-container .ipt_list {
  margin: 15px 0 0 300px;
}
.app-container .ipt_list .lable {
  display: inline-block;
  width: 120px;
}
.app-container .ipt_list .el-input {
  width: 500px;
  margin-right: 15px;
}
.app-container .end_order {
  padding-left: 50px;
}
.app-container .text_right {
  margin-right: 30px;
}
.app-container .el-link--inner {
  color: #f56c6c;
}
.app-container .el-textarea {
  width: 500px;
}
.app-container .note_btn {
  margin: 30px 0 0 500px;
}
</style>
<style>
.el-link--inner {
  color: #409eff;
}
.end_order .el-textarea__inner {
  min-height: 90px !important;
}
</style>
